<template>
  <div class="container">
    <h1 class="text-center">Posts</h1>
    <div style="display: flex">
      <vs-button
        upload
        icon
        color="danger"
        flat
        @click="addPost()"
      >
        给个post呗<i class="bx bxs-phone-call"></i>
      </vs-button>
      <vs-input border   v-model="title" icon-after label-placeholder="回车搜索" v-on:keyup.enter.native="getPostsList">
        <template #icon>
          <i class='bx bx-glasses-alt'></i>
        </template>
      </vs-input>
    </div>
    <vs-dialog v-model="active" width="1900px" prevent-close>
      <template>
        <a-upload
          name="file"
          :multiple="true"
          :customRequest="upload"
          :disabled="postForm.uploadDisabled"
          :showUploadList="false"
        >
          <vs-button>
            <a-icon type="upload"/>
            <Avatar :src="postForm.cover"/>
          </vs-button>
        </a-upload>
      </template>
      <template class="vs-input">
        <vs-select multiple
                   placeholder="选择你的tags"
                   filter
                   state='warn'
                   style="margin-bottom: 10px;margin-top: 20px;width: 600px"
                   v-model="postForm.tags">
          <vs-option v-for="(item) in tagsList" :key="item.id" :value="item.name" :label="item.name">{{item.name}}</vs-option>
        </vs-select>
      </template>
      <template #header>
        <h4 class="not-margin">
          留下你的<b>post</b>
        </h4>
      </template>
      <div class="con-form">
        <template>
          <vs-input v-model="postForm.title"  placeholder="标题">
            <template #icon>
              <a-icon type="smile" theme="twoTone" spin  />
            </template>
          </vs-input>
        </template>
        <template>
          <vs-input v-model="postForm.author"  placeholder="谁在本店写的~~~">
            <template #icon>
              <a-icon type="user"    />
            </template>
          </vs-input>
        </template>
        <template>
          <vs-input v-model="postForm.desc"  placeholder="描述">
            <template #icon>
              <a-icon type="heart" theme="twoTone"  spin  />
            </template>
          </vs-input>
        </template>
<!--        <template>-->
<!--          <a-textarea v-model="postForm.content" placeholder="小店承受不了5000字的正文哦~~~" class="vs-input"-->
<!--                      style="width: 100%;height: 300px;resize: none;border-radius: 10px">-->
<!--            <template #icon>-->
<!--            </template>-->
<!--          </a-textarea>-->
<!--        </template>-->
        <template>
          <v-md-editor v-model="postForm.content" height="400px" left-toolbar="undo redo | emoji | code | clear | quote | table | link | h | bold "></v-md-editor>
        </template>
<!--        <div class="center content-inputs" style="justify-content: normal;padding: 0px;">-->
<!--          <vs-input type="date" v-model="postForm.publishDate" placeholder="发布日期" style="width: 200px" disabled="true">-->
<!--          </vs-input>-->
<!--          <vs-input-->
<!--            disabled="true"-->
<!--            type="time"-->
<!--            v-model="postForm.time"-->
<!--            label="time"-->
<!--          />-->
<!--        </div>-->
        <template>
<!--          <div style="width: 100%;height: 50px">-->
<!--            &lt;!&ndash;          <vs-checkbox v-model="remember">Remember me</vs-checkbox>&ndash;&gt;-->
<!--            &lt;!&ndash;          <a href="#">Forgot Password?</a>&ndash;&gt;-->
<!--            <a-spin size="large"/>-->
<!--          </div>-->
        </template>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <vs-button block @click="savePost">
            发布~~~
          </vs-button>
          <vs-button danger block @click="saveDraft">
            存为草稿~~~
          </vs-button>

          <div class="new">
<!--            New Here? <a href="#">Create New Account</a>-->
          </div>
        </div>
      </template>
    </vs-dialog>

    <hr/>
    <div v-if="postsList.length">
      <br/>
      <div class="grid-3_xs-1_sm-2_md-2">
        <div
          :key="index"
          v-for="(post, index) in postsList"
          class="col center"
        >
          <PostCard :post="post"/>
        </div>
      </div>
      <div class="center con-pagination">
        <vs-pagination v-model="curPage" :length="total" not-margin square/>
      </div>
    </div>
    <Nothing v-else/>
  </div>
</template>

<script>
import PostCard from '@/components/PostCard.vue'
import Nothing from '@/components/Nothing.vue'
import axios from 'axios'
import Avatar from '@/components/Avatar.vue'

export default {
  name: 'ViewPosts',
  components: {
    Avatar,
    PostCard,
    Nothing
  },
  data: function () {
    return {
      title: null, // 搜索条件
      postForm: {
        uploadDisabled: false,
        cover: '',
        title: '',
        author: '',
        content: '',
        time: '',
        publishDate: '',
        tags: []
      },
      previewImage: '',
      active: false,
      email: '',
      password: '',
      remember: false,
      allPosts: this.getConfig('posts.json').posts,
      postsList: [],
      curPage: 1,
      total: 0,
      tagsList: [],
      config: this.getConfig().config
    }
  },
  watch: {
    curPage: function (v1, v2) {
      // console.log(v1)
      this.getPostsList()
    },
    'postForm.cover': function (v1, v2) {
      console.log(v1, v2)
      if (v1 !== null && v1 !== '') {
        this.postForm.uploadDisabled = true
      }
    },
    'postForm.title': function (v1, v2) {
      if (v1 !== null && v1.length > 70) {
        this.$vs.notification({
          progress: 'auto',
          title: '哇哦',
          position: 'top-left',
          color: 'danger',
          text: '标题有点长~~~'
        })
        this.postForm.title = this.postForm.title.substring(0, 40)
      }
    },
    'postForm.desc': function (v1, v2) {
      if (v1 !== null && v1.length > 70) {
        this.$vs.notification({
          progress: 'auto',
          title: '哇哦',
          position: 'top-left',
          color: 'danger',
          text: '描述有点长~~~'
        })
        this.postForm.desc = this.postForm.desc.substring(0, 40)
      }
    },
    'postForm.content': function (v1, v2) {
      if (v1 !== null && v1.length > 9000000) {
        this.$vs.notification({
          progress: 'auto',
          title: '哇哦',
          position: 'top-left',
          color: 'danger',
          text: '正文有点长~~~'
        })
        this.postForm.content = this.postForm.content.substring(0, 9000000)
      }
    },
    'postForm.author': function (v1, v2) {
      if (v1 !== null && v1.length > 20) {
        this.$vs.notification({
          progress: 'auto',
          title: '哇哦',
          position: 'top-left',
          color: 'danger',
          text: '你的名字有点长~~~,换个个性的名字试试'
        })
        this.postForm.author = this.postForm.author.substring(0, 5)
      }
    }
  },
  mounted: function () {
    this.changeTitle('Posts')
    this.getPostsList()
    this.getTagsList()
  },
  methods: {
    getPosts: function () {
      try {
        return this.allPosts[this.curPage - 1].slice().reverse()
      } catch (e) {
        return []
      }
    },
    getTagsList: function () {
      var query = {
      }
      axios({
        url: '/api/blog/tagsLibInfo/list',
        method: 'post',
        data: query
      }).then(async (res) => {
        this.tagsList = res.data.data
      })
    },
    getPostsList: function () {
      var query = {
        size: 6,
        page: this.curPage,
        title: this.title
      }
      axios({
        url: '/api/blog/postsInfo/pageLists',
        method: 'post',
        data: query
      }).then(async (res) => {
        this.postsList = res.data.data
        if (res.data.count < 6) {
          this.total = 1
        } else {
          if (res.data.count % 6 !== 0) {
            this.total = parseInt((res.data.count / 6)) + 1
            console.log()
          } else {
            this.total = parseInt((res.data.count / 6))
          }
        }

        // console.log(this.postsList)
        this.title = null
        return this.postsList
      })
    },
    addPost: function () {
      this.postForm.title = ''
      this.postForm.content = ''
      this.postForm.publishDate = null
      this.postForm.time = null
      this.postForm.desc = ''
      this.postForm.cover = ''
      this.postForm.tags = []
      this.postForm.uploadDisabled = false
      this.active = !this.active
    },
    upload: function (info) {
      const formData = new FormData()
      formData.append('file', info.file)

      // You can use any AJAX library you like
      axios({
        url: '/api/blog/postsInfo/upload/blog',
        method: 'post',
        data: formData
        // headers: {
        //   'Content-Type': 'multipart/form-data'
        // }
      }).then(res => {
        var data = res.data
        if (data.resp_code === 0) {
          this.postForm.cover = res.data.data
        } else {
          this.$vs.notification({
            progress: 'auto',
            title: '上传失败',
            position: 'top-left',
            color: 'danger',
            text: res.data.resp_msg
          })
        }
      })
    },
    savePost: function () {
      console.log(this.postForm)
      if (this.postForm.title === '' ||
        this.postForm.cover === '' ||
        this.postForm.author === '' ||
        this.postForm.content === '' ||
        this.postForm.desc === '') {
        this.$vs.notification({
          progress: 'auto',
          title: '哇哦',
          position: 'top-left',
          color: 'danger',
          text: '请填写完整'
        })
      } else {
        console.log(this.postForm)
        axios({
          url: '/api/blog/postsInfo/add',
          method: 'post',
          data: this.postForm
        }).then(async (res) => {
          this.active = !this.active
          this.$vs.notification({
            progress: 'auto',
            title: '哇哦',
            position: 'top-left',
            color: 'success',
            text: '谢谢你的post'
          })
          this.curPage = 1
          this.getPostsList()
        })
      }
    },
    saveDraft: function () {}
  }
}
</script>

<style lang="stylus">
getColor(vsColor, alpha = 1)
unquote("rgba(var(--vs-" + vsColor + "), " +alpha + ")")
getVar(var)
unquote("var(--vs-" + var + ")")
.not-margin
  margin 0px
  font-weight normal
  padding 10px

.con-form
  width 100%

  .flex
    display flex
    align-items center
    justify-content space-between

    a
      font-size .8rem
      opacity .7

      &:hover
        opacity 1

  .vs-checkbox-label
    font-size .8rem

  .vs-input-content
    margin 10px 0px
    width calc(100%)

    .vs-input
      width 100%

.footer-dialog
  display flex
  align-items center
  justify-content center
  flex-direction row
  width calc(100%)

  .new
    margin 0px
    margin-top 20px
    padding: 0px
    font-size .7rem

    a
      color getColor('primary') !important
      margin-left 6px

      &:hover
        text-decoration underline

  .vs-button
    margin 0px
</style>
